<template>
    <div>
        <div class="button-box clearflex">
            <el-button @click="addMenu('0')" type="primary">新增根菜单</el-button>
        </div>

        <!-- 由于此处菜单跟左侧列表一一对应所以不需要分页 pageSize默认999 -->
        <el-table :data="tableData" border row-key="menuId" stripe :tree-props="{children: 'childList'}">
            <el-table-column label="菜单标题" width="160" prop="title" align="center"></el-table-column>
            <el-table-column label="路由名称" width="160" prop="name" align="center"></el-table-column>
            <el-table-column label="资源路径" min-width="160" prop="path" align="center"></el-table-column>
            <el-table-column label="权限标识" min-width="160" prop="perms" align="center"></el-table-column>
            <el-table-column label="按钮标识" min-width="160" prop="frontPerms" align="center"></el-table-column>
            <el-table-column label="状态" min-width="70" prop="hidden" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.hidden == 1 ? "显示" : "隐藏" }}</span>
                </template>
            </el-table-column>
            <el-table-column label="图标" min-width="160" prop="icon" align="center">
                <template slot-scope="scope">
                    <i :class="'el-icon-' + scope.row.icon"></i>
                </template>
            </el-table-column>
            <el-table-column label="排序" min-width="120" prop="sortBy" align="center"></el-table-column>
            <el-table-column fixed="right" label="操作" width="350" align="center">
                <template slot-scope="scope">
                    <el-button @click="addMenu(scope.row.menuId)" size="small" type="primary" icon="el-icon-edit">添加子菜单
                    </el-button>
                    <el-button @click="editMenu(scope.row)" size="small" type="primary" icon="el-icon-edit">编辑
                    </el-button>
                    <el-button @click="deleteMenu(scope.row.menuId)" size="small" type="danger" icon="el-icon-delete">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog :before-close="handleClose" :title="dialogTitle" :visible.sync="dialogFormVisible" class="dialogs">
            <el-form
                    :inline="true"
                    :model="form"
                    :rules="rules"
                    ref="menuForm"
                    label-width="100px"
            >
                <el-form-item label="应用名称" prop="application">
                    <el-select placeholder="选择应用" v-model="form.application">
                        <el-option v-for="item in applyOptions"
                                   :key="item.value"
                                   :label="item.label"
                                   :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="路由名称" prop="name">
                    <el-input autocomplete="off" v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="资源路径" prop="path">
                    <el-input autocomplete="off" v-model="form.path"></el-input>
                </el-form-item>
                <el-form-item label="菜单标题" prop="title">
                    <el-input autocomplete="off" v-model="form.title"></el-input>
                </el-form-item>

                <el-form-item label="文件路径" prop="component">
                    <el-input autocomplete="off" v-model="form.component"></el-input>
                </el-form-item>

                <el-form-item label="权限标识" prop="perms">
                    <el-input autocomplete="off" v-model="form.perms"></el-input>
                </el-form-item>

                <el-form-item label="前端标识" prop="frontPerms">
                    <el-input autocomplete="off" v-model="form.frontPerms"></el-input>
                </el-form-item>

                <el-form-item label="图标icon" prop="icon">
                    <!-- <icon :icon="form.icon">
                        <template slot="prepend">el-icon-</template>
                    </icon> -->
                    <el-input autocomplete="off" v-model="form.icon"></el-input>
                </el-form-item>

                <el-form-item prop="type" label="菜单类型">
                    <el-radio-group v-model="form.type">
                        <el-radio :label="0">路由</el-radio>
                        <el-radio :label="1">菜单</el-radio>
                        <el-radio :label="2">按钮</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item prop="hidden" label="菜单状态">
                    <el-radio-group v-model="form.hidden">
                        <el-radio :label="1">显示</el-radio>
                        <el-radio :label="0">隐藏</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="排序标记" prop="sortBy">
                    <el-input-number
                            v-model="form.sortBy"
                            :min="1"
                            :max="100"
                            size="small"
                    ></el-input-number>
                </el-form-item>
            </el-form>
            <div class="dialog-footer" slot="footer">
                <el-button @click="closeDialog">取 消</el-button>
                <el-button @click="enterDialog" type="primary">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    // 获取列表内容封装在mixins内部  getTableData方法 初始化已封装完成

    import {addBaseMenu, deleteBaseMenu, getMenuList, updateBaseMenu} from '@/api/menu'
    import infoList from '@/components/mixins/infoList'
    import icon from '@/view/superAdmin/menu/icon'

    export default {
        name: 'Menus',
        mixins: [infoList],
        data() {
            return {
                applyOptions: [
                    {
                        value: "0",
                        label: "PC",
                    },
                    {
                        value: "1",
                        label: "小程序",
                    },
                ],
                checkFlag: false,
                listApi: getMenuList,
                dialogFormVisible: false,
                dialogTitle: '新增菜单',
                menuOption: [
                    {
                        ID: '0',
                        title: '根菜单'
                    }
                ],
                form: {
                    application: '0',
                    type: 0,
                    hidden: 1,
                    name: '',
                    path: '',
                    title: '',
                    perms: '',
                    frontPerms: '',
                    sortBy: '',
                    icon: ''

                },
                rules: {
                    // path: [{required: true, message: '请输入菜单name', trigger: 'blur'}],
                    // component: [
                    //     {required: true, message: '请输入文件路径', trigger: 'blur'}
                    // ],
                    'meta.title': [
                        {required: true, message: '请输入菜单展示名称', trigger: 'blur'}
                    ]
                },
                isEdit: false,
                test: ''
            }
        },
        components: {
            icon
        },
        methods: {
            changeName() {
                this.form.path = this.form.name
            },
            setOptions() {
                this.menuOption = [
                    {
                        ID: '0',
                        title: '根目录'
                    }
                ]
                this.setMenuOptions(this.tableData, this.menuOption, false)
            },
            setMenuOptions(menuData, optionsData, disabled) {
                menuData &&
                menuData.map(item => {
                    if (item.children && item.children.length) {
                        const option = {
                            title: item.meta.title,
                            ID: String(item.ID),
                            disabled: disabled || item.ID == this.form.ID,
                            children: []
                        }
                        this.setMenuOptions(
                            item.children,
                            option.children,
                            disabled || item.ID == this.form.ID
                        )
                        optionsData.push(option)
                    } else {
                        const option = {
                            title: item.meta.title,
                            ID: String(item.ID),
                            disabled: disabled || item.ID == this.form.ID
                        }
                        optionsData.push(option)
                    }
                })
            },
            handleClose(done) {
                this.initForm()
                done()
            },
            // 懒加载子菜单
            load(tree, treeNode, resolve) {
                resolve([
                    {
                        id: 31,
                        date: '2016-05-01',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1519 弄'
                    },
                    {
                        id: 32,
                        date: '2016-05-01',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1519 弄'
                    }
                ])
            },
            // 删除菜单
            deleteMenu(menuId) {
                this.$confirm('此操作将永久删除所有角色下该菜单, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(async () => {
                        const res = await deleteBaseMenu(menuId)
                        if (res.statusCode == 0) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            })
                            this.getTableData();
                        }
                    })
                    .catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        })
                    })
            },
            // 初始化弹窗内表格方法
            initForm() {
                this.checkFlag = false
                this.$refs.menuForm.resetFields()
                this.form = {
                    ID: 0,
                    path: '',
                    name: '',
                    hidden: 1,
                    parentId: '0',
                    component: '',
                    application: '0',
                    meta: {
                        title: '',
                        icon: '',
                        defaultMenu: false,
                        keepAlive: ''
                    }
                }
            },
            // 关闭弹窗
            closeDialog() {
                this.initForm()
                this.dialogFormVisible = false
            },
            // 添加menu
            async enterDialog() {
                this.$refs.menuForm.validate(async valid => {
                    if (valid) {
                        let res
                        if (this.isEdit) {
                            res = await updateBaseMenu(this.form)
                        } else {
                            res = await addBaseMenu(this.form)
                        }
                        if (res.statusCode == 0) {
                            this.$message({
                                type: 'success',
                                message: this.isEdit ? '编辑成功' : '添加成功!'
                            })
                            this.getTableData()
                        } else {
                            this.$message({
                                type: "error",
                                message: res.msg,
                            });
                        }
                        this.initForm()
                        this.dialogFormVisible = false
                    }
                }).catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
            },
            // 添加菜单方法，id为 0则为添加根菜单
            addMenu(id) {
                this.dialogTitle = '新增菜单'
                this.form.parentId = String(id)
                this.isEdit = false
                //this.setOptions()
                this.dialogFormVisible = true
            },
            // 修改菜单方法
            async editMenu(row) {
                this.dialogTitle = '编辑菜单'
                this.form = row
                this.isEdit = true
                //this.setOptions()
                this.dialogFormVisible = true
            }
        },
        async created() {
            this.getTableData()
        }
    }
</script>
<style scoped lang="scss">
    .dialogs {
        ::v-deep .el-input-group--append .el-input__inner {
            width: 170px !important;
        }

        ::v-deep .el-dialog__body {
            padding: 15px 20px 10px 20px;
        }

        ::v-deep .el-input__inner {
            width: 225px;
        }

        ::v-deep .el-textarea__inner {
            width: 225px;
        }

        .dialog-footer {
            text-align: center;
        }

        ::v-deep .el-input-number .el-input__inner {
            width: 130px;
        }
    }
</style>
